<template>
  <div v-if="config" class="field-introduction-setting">
    <!-- <div class="divider-empty-thin"></div> -->
    <div class="setting-item">
      <div class="item-title">{{ $srv.getI18nByValue('图标') }}：</div>
      <div class="item-value">
        <o-combobox
          :compBoxInfo="GT_compBoxInfo"
          :config="comboBoxConf"
          @on-change="onIconChange"
        />
      </div>
    </div>
    <div class="setting-item">
      <div class="item-title">{{ $srv.getI18nByValue('提示信息') }}：</div>
      <div class="item-value">
        <o-i18n-selector
          class="custom-btn-title"
          v-model="config['content']"
          @on-dochange="saveChanges"
          :placeholder="
            $srv.getI18nByPath('piece.oQueryLinkSettingc.fieldpromptinfo')
          "
        >
        </o-i18n-selector>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ifs, T_srv, ts, Tsrv } from '@/services';
import { Component, Model, Vue, Watch } from 'vue-property-decorator';

@Component
export default class qbeSearchSetting extends Vue {
  @Model('modelchange') config: any;

  @Watch('config.icon') iconChanges() {
    const iconRef = this.GT_compBox.getCompMergeName(
      this.G_compID,
      'oCombobox'
    );
    if (iconRef) {
      iconRef?.initValue(this.config?.icon);
    }
  }

  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 组件名 */
  private G_compName: string = 'oCustomBtnSetting';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  private comboBoxConf: any = {
    i18n: {
      field: false, // 属性字段是否国际化转换
      list: false // 数据list是否国际化转换
    },
    multiple: false,

    placeholder: 'piece.oQueryLinkSettingc.fieldprompticon',
    // 过滤
    filter: {
      // $and: { name: 'xxx', name1: 8, $or: [{ name: 1 }, { name1: 2 }] } // 启用过滤会降低性能
    },
    // 列表字段
    field: ['key'], // 注意与数据对应顺序
    keyField: 'key', // 一行的key值字段
    displayField: 'key',
    // 数据列表
    list: this.getComboboxList()
  };

  created() {
    this.G_compID = Tsrv.utils.getGUID();
    /* 如果外部有传入组件信息 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox = new ts.T_compBox(this.G_compID); // 使用本地实例
    } else {
      this.G_compID = this.compBoxInfo.compID;
      this.GT_compBox = this.compBoxInfo.TcompBox;
    }
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
    this.init();
  }

  mounted() {
    /* 向父组件发送实例 */
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.GT_compBox.getCompMergeName(this.G_compID, 'oCombobox')?.initValue(
      this.config?.icon
    );
  }

  private init() {}

  private getComboboxList(): Array<any> {
    const l_arr: Array<any> = [];
    for (const key of Tsrv.TiconsFont.getIcons()) {
      l_arr.push({ type: 'iconFont', data: { key } });
    }

    return l_arr;
  }

  private onIconChange(v: any) {
    this.config.icon = v[0].key ? v[0].key : '';
    this.saveChanges();
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }

  private saveChanges() {
    this.$emit('modelchange', this.config);
    this.$emit('change');
  }
}
</script>

<style scoped lang="scss">
.field-introduction-setting {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 10px 0 20px;
  .setting-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    flex-wrap: nowrap;

    .item-title {
      text-align: center;
    }
    .item-value {
      margin-left: 10px;
      flex: 1;
    }
  }
}
</style>
